﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../../common/common.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="../../../static/css/bootstrap.min.css"/>
		<script type="text/javascript" src="../../../static/js/jquery-2.2.4.min.js"></script>
		<script type="text/javascript" src="../../../static/js/jquery.tips.js"></script>
		<script type="text/javascript" src="../../../static/js/bootstrap.min.js" ></script>
		<link rel="stylesheet" type="text/css" href="../../../static/js/remodal/remodal.css"/>
		<link rel="stylesheet" type="text/css" href="../../../static/js/remodal/remodal-default-theme.css"/>
		<script type="text/javascript" src="../../../static/js/remodal/remodal.min.js" ></script>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>云众科技网上预约挂号系统</title>
	</head>
	<style type="text/css">
		html body{
			width: 100%;
		}
		.piaoyikuang{
			border: 1px solid #66AFE9;
			border-radius: 10px;
		}
		.piaoyi{
			float: left;
			width: 100px;
			height: 30px;
			border: 0px solid #66AFE9;
			text-align: center;
		}
		.docInfo{
			border: 1px solid #66AFE9;
			border-radius: 10px;
			margin-top: 10px;
			padding: 10px;
		}
	</style>
	<body>
		<!--
        	作者：石洪刚
        	时间：2017年8月10日14:12:50
        	描述：个人中心	联系我们	登录	注册
        -->
		<div class="container">
			<nav class="nav navbar-default navbar-fixed-top container-fluid" role="navigation" style="background-color:aquamarine;">
				<div class="nav navbar-header">
					<!-- 导航头 -->
					<a class="navbar-brand" href="#">云众科技</a>
					<button class="navbar-toggle" data-toggle= "collapse" data-target="#mynav">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse" id="mynav">
					<!-- 导航内容 -->
					<ul class="nav navbar-nav">
						<li><a href="">联系电话：0451-87362836</a></li>
						<!-- 下面的代码需要登录后才能显示 -->
						<li><a href="<%=request.getContextPath()%>/personal/personal.html">个人中心</a></li>
						<li><a href="#"><span class="glyphicon glyphicon-user"></span>欢迎您：张飞</a></li>
					</ul>
					<!-- 导航尾，登录后不再显示 -->
					<div class="nav navbar-right">
						<ul class="nav navbar-nav">
							<li><a href="<%=request.getContextPath()%>/login.html">登录</a></li>
							<li><a href="<%=request.getContextPath()%>/register/register.html">注册</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
		<!--
        	作者：石洪刚
        	时间：2017年8月10日14:32:38
        	描述：项目名称   搜索框 （搜索框只有游客或患者可见）
        -->
		<div class="container" style="margin-top: 50px;">
			<div class="col-sm-6" >
				<h2 class="text-primary" >云众科技网上预约挂号系统</h2>
			</div>

			<div class="col-sm-6" style="margin-top: 15px;">
				<form method="post" name="form1" class="form form-horizontal">
					<div class="input-group">
					     <div class="input-group-btn">
						    <button id="index_search_btn" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">科室<span class="caret"></span></button>
						       <ul class="dropdown-menu" role="menu">
						         <li><a href="#">科室</a></li>
						         <li><a href="#">疾病</a></li>
						       </ul>
					     </div><!-- /btn-group -->
					     <input type="text" class="form-control" placeholder="请输入搜索内容" >
					     <span class="input-group-addon" style="background-color:#f0ad4e;cursor: pointer;" >
						   <span class="glyphicon glyphicon-search "></span>
					     </span>
					</div>
				 </form>
			</div>

		</div>
		<!--
        	作者：石洪刚
        	时间：2017年8月10日17:04:47
        	描述：导航条   游客可见(在dashboard页) ：按科室挂号  按疾病挂号  最新公告
        -->
		<div class="container" style="margin-top: 10px;">
			<ul class="nav nav-pills guahao" role="tablist" style="background-color:lightcyan">
                <li ><a href="/">首页</a></li>
                <li class="active"><a href="/depttype/query">按科室预约</a></li>
                <li ><a href="<%=request.getContextPath()%>/appointment/illness/listIllness.jsp">按疾病预约</a></li>
                <li ><a href="/listAnnouncement/query">最新公告</a></li>
			</ul>
		</div>

        	<form method="post">
			<!-- 医生信息 -->
			<div class="container docInfo">
	        	<div class="col-sm-2">
                    <c:if test="${person.ppPic!=null }">
                        <img src="/base/download?url=${person.ppPic}" width="150px" height="200px;"/>
                    </c:if>
                    <c:if test="${person.ppPic==null }">
                        <img src="<%=request.getContextPath() %>/static/img/bianque.jpg" width="150px" height="200px;"/>
                    </c:if>
	        	</div>
	        	<div class="col-sm-9">
	        		<h4 class="list-group-item-heading">${person.ppName}<span style="color: #D58512;">${person.professionalName}</span></h4>
				    <h4 class="list-group-item-text">${person.departmentName}</h4>
				    <h4 class="list-group-item-text">出诊时间：${person.ppWork}</h4>
                    <h4 style="width:660px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" class="list-group-item-text">医生简介：${person.ppInfo}</h4>
                    <h4 style="width:660px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" class="list-group-item-text">擅长领域：${person.doctorDomain}</h4></div>
	        	</div>
	        </div>
	        <!--
        	作者：石洪刚
        	时间：2017年8月28日23:33:38
        	描述：预约  时间选择
        -->
        <div class="container">
            <input name="riqi" type="hidden" >
            <input name="shijian" type="hidden">
            <input name="time" type="hidden">
        	<h4 class="text-warning">选择时间开始预约，预约期限9天</h4>
        </div>
        <div class="container">
        	<table class="table table-hover table-striped table-bordered">
                <tr class="warning">
                    <th>日期/时间/剩余人数</th>

                    <th class="a"></th>
                    <th class="b"></th>
                    <th class="c"></th>
                    <th class="d"></th>
                    <th class="e"></th>
                    <th class="f"></th>
                    <th class="g"></th>
                    <th class="h"></th>
                    <th class="i"></th>
                </tr>
                <c:forEach items="${set }" var="s" varStatus="i">
                    <tr id="${i.index}">
                        <td id=""> ${s}</td>
                        <c:forEach items="${scheduling }" var="sc" varStatus="j" >

                            <c:choose>
                                <c:when test="${s.substring(2) == sc.time1 }"><td><a href="javascript:startApp('${sc.time1}','${sc.standby }','time1','${sc.count1 }')">预约<span class="badge pull-right">${sc.count1 }</span></a></td></c:when>
                                <c:when test="${s.substring(2) == sc.time2 }"><td><a href="javascript:startApp('${sc.time2}','${sc.standby }','time2','${sc.count2 }')">预约<span class="badge pull-right">${sc.count2 }</span></a></td></c:when>
                                <c:when test="${s.substring(2) == sc.time3 }"><td><a href="javascript:startApp('${sc.time3}','${sc.standby }','time3','${sc.count3 }')">预约<span class="badge pull-right">${sc.count3 }</span></a></td></c:when>
                                <c:when test="${s.substring(2) == sc.time4 }"><td><a href="javascript:startApp('${sc.time4}','${sc.standby }','time4','${sc.count4 }')">预约<span class="badge pull-right">${sc.count4 }</span></a></td></c:when>
                                <c:when test="${s.substring(2) == sc.time5 }"><td><a href="javascript:startApp('${sc.time5}','${sc.standby }','time5','${sc.count5 }')">预约<span class="badge pull-right">${sc.count5 }</span></a></td></c:when>
                                <c:when test="${s.substring(2) == sc.time6 }"><td><a href="javascript:startApp('${sc.time6}','${sc.standby }','time6','${sc.count6 }')">预约<span class="badge pull-right">${sc.count6 }</span></a></td></c:when>
                                <c:otherwise><td></td></c:otherwise>
                            </c:choose>
                        </c:forEach>
                    </tr>
                </c:forEach>
        	</table>
        </div>
        </form>
        <!-- 模态框 -->
        <div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
			<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
		  	<div>
		    	<h2 id="modal1Title">Remodal</h2>
		    	<p id="modal1Desc">
		     	 Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin
		    	  with declarative state notation and hash tracking.
		    	</p>
		  	</div>
		  	<br>
            <button data-remodal-action="confirm" class="remodal-confirm" onclick="appSave()">提交</button>
			<button data-remodal-action="cancel" class="remodal-cancel">取消</button>
        </div>
        <!-- 模态框2 -->
        <div class="remodal"  id="modal2" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
			<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
		  	<div>
		    	<h2 id="modal1Title2">Remodal</h2>
		    	<p id="modal1Desc2">
		     	 Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin
		    	  with declarative state notation and hash tracking.
		    	</p>
		  	</div>
		  	<br>
			<button data-remodal-action="confirm" class="remodal-confirm">确定</button>
        </div>
	</body>
	<script type="text/javascript">
        $(function(){
            //获取当前天数
            var date1 = new Date();
            //获取第二天
            var date2 = new Date(date1);
            date2.setDate(date1.getDate() + 1);
            //获取第三天
            var date3 = new Date(date2);
            date3.setDate(date2.getDate() + 1);
            //获取第四天
            var date4 = new Date(date3);
            date4.setDate(date3.getDate() + 1);
            //获取第五天
            var date5 = new Date(date4);
            date5.setDate(date4.getDate() + 1);
            //获取第六天
            var date6 = new Date(date5);
            date6.setDate(date5.getDate() + 1);
            //获取第七天
            var date7 = new Date(date6);
            date7.setDate(date6.getDate() + 1);
            //获取第八天
            var date8 = new Date(date7);
            date8.setDate(date7.getDate() + 1);
            //获取第九天
            var date9 = new Date(date8);
            date9.setDate(date8.getDate() + 1);
            var Week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            $(".a").html(date1.getFullYear()+"年"+(date1.getMonth()+1)+"月"+(date1.getDate())+"日  <br>"+Week[date1.getDay()]);
            $(".b").html(date2.getFullYear()+"年"+(date2.getMonth()+1)+"月"+(date2.getDate())+"日 <br> "+Week[date2.getDay()]);
            $(".c").html(date3.getFullYear()+"年"+(date3.getMonth()+1)+"月"+(date3.getDate())+"日 <br> "+Week[date3.getDay()]);
            $(".d").html(date4.getFullYear()+"年"+(date4.getMonth()+1)+"月"+(date4.getDate())+"日 <br> "+Week[date4.getDay()]);
            $(".e").html(date5.getFullYear()+"年"+(date5.getMonth()+1)+"月"+(date5.getDate())+"日 <br> "+Week[date5.getDay()]);
            $(".f").html(date6.getFullYear()+"年"+(date6.getMonth()+1)+"月"+(date6.getDate())+"日 <br> "+Week[date6.getDay()]);
            $(".g").html(date7.getFullYear()+"年"+(date7.getMonth()+1)+"月"+(date7.getDate())+"日 <br> "+Week[date7.getDay()]);
            $(".h").html(date8.getFullYear()+"年"+(date8.getMonth()+1)+"月"+(date8.getDate())+"日 <br> "+Week[date8.getDay()]);
            $(".i").html(date9.getFullYear()+"年"+(date9.getMonth()+1)+"月"+(date9.getDate())+"日 <br> "+Week[date9.getDay()]);


        });

        function startApp(v1,v2,v3,count1,count2,count3,count4,count5,count6){
            var name = "${userName}";
            var date = new Date();
            var y = date.getFullYear();
            var xq="${person.ppWork}";
            if (name=="") {
                var doctorid="${person.ppId}";
                var ill="${ill}";
                location.href = "<%=request.getContextPath()%>/login?doctorid="+doctorid+"&ill="+ill+"&xq="+xq;
            }else{
                if (count1 == 0 || count1 == null){
                    var inst2 = $("#modal2").remodal();
                    $("#modal1Title2").html("提示");
                    $("#modal1Desc2").html("现在想预约了?晚了,换一个时间吧!");
                    inst2.open()
                } else {
                $("input[name='riqi']").val();
                $("input[name='shijian']").val();
                $("input[name='time']").val();
                var inst = $('[data-remodal-id=modal]').remodal();
                $("#modal1Title").html("提示");
                $("#modal1Desc").html("您预约于"+v2+v1+"找"+"${person.ppName }"+"(${person.professionalName })就诊");
                $("input[name='riqi']").val(v2);
                $("input[name='shijian']").val(v1);
                $("input[name='time']").val(v3);
                inst.open()
                }
                if (count2 == 0 || count2 == null){
                    var inst2 = $("#modal2").remodal();
                    $("#modal1Title2").html("提示");
                    $("#modal1Desc2").html("现在想预约了?晚了,换一个时间吧!");
                    inst2.open()
                } else {
                    $("input[name='riqi']").val();
                    $("input[name='shijian']").val();
                    $("input[name='time']").val();
                    var inst = $('[data-remodal-id=modal]').remodal();
                    $("#modal1Title").html("提示");
                    $("#modal1Desc").html("您预约于"+v2+v1+"找"+"${person.ppName }"+"(${person.professionalName })就诊");
                    $("input[name='riqi']").val(v2);
                    $("input[name='shijian']").val(v1);
                    $("input[name='time']").val(v3);
                    inst.open()
                }
                if (count3 == 0 || count3 == null){
                    var inst2 = $("#modal2").remodal();
                    $("#modal1Title2").html("提示");
                    $("#modal1Desc2").html("现在想预约了?晚了,换一个时间吧!");
                    inst2.open()
                } else {
                    $("input[name='riqi']").val();
                    $("input[name='shijian']").val();
                    $("input[name='time']").val();
                    var inst = $('[data-remodal-id=modal]').remodal();
                    $("#modal1Title").html("提示");
                    $("#modal1Desc").html("您预约于"+v2+v1+"找"+"${person.ppName }"+"(${person.professionalName })就诊");
                    $("input[name='riqi']").val(v2);
                    $("input[name='shijian']").val(v1);
                    $("input[name='time']").val(v3);
                    inst.open()
                }
                if (count4 == 0 || count4 == null){
                    var inst2 = $("#modal2").remodal();
                    $("#modal1Title2").html("提示");
                    $("#modal1Desc2").html("现在想预约了?晚了,换一个时间吧!");
                    inst2.open()
                } else {
                    $("input[name='riqi']").val();
                    $("input[name='shijian']").val();
                    $("input[name='time']").val();
                    var inst = $('[data-remodal-id=modal]').remodal();
                    $("#modal1Title").html("提示");
                    $("#modal1Desc").html("您预约于"+v2+v1+"找"+"${person.ppName }"+"(${person.professionalName })就诊");
                    $("input[name='riqi']").val(v2);
                    $("input[name='shijian']").val(v1);
                    $("input[name='time']").val(v3);
                    inst.open()
                }
                if (count5 == 0 || count5 == null){
                    var inst2 = $("#modal2").remodal();
                    $("#modal1Title2").html("提示");
                    $("#modal1Desc2").html("现在想预约了?晚了,换一个时间吧!");
                    inst2.open()
                } else {
                    $("input[name='riqi']").val();
                    $("input[name='shijian']").val();
                    $("input[name='time']").val();
                    var inst = $('[data-remodal-id=modal]').remodal();
                    $("#modal1Title").html("提示");
                    $("#modal1Desc").html("您预约于"+v2+v1+"找"+"${person.ppName }"+"(${person.professionalName })就诊");
                    $("input[name='riqi']").val(v2);
                    $("input[name='shijian']").val(v1);
                    $("input[name='time']").val(v3);
                    inst.open()
                }
                if (count6 == 0 || count6 == null){
                    var inst2 = $("#modal2").remodal();
                    $("#modal1Title2").html("提示");
                    $("#modal1Desc2").html("现在想预约了?晚了,换一个时间吧!");
                    inst2.open()
                } else {
                    $("input[name='riqi']").val();
                    $("input[name='shijian']").val();
                    $("input[name='time']").val();
                    var inst = $('[data-remodal-id=modal]').remodal();
                    $("#modal1Title").html("提示");
                    $("#modal1Desc").html("您预约于"+v2+v1+"找"+"${person.ppName }"+"(${person.professionalName })就诊");
                    $("input[name='riqi']").val(v2);
                    $("input[name='shijian']").val(v1);
                    $("input[name='time']").val(v3);
                    inst.open()
                }
            }
        }

		function appSave(){
			location.href = "../../personal/personal.html";
		}
	</script>
</html>